<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="th/m/include/head :: head(~{::title}, ~{::style})">
    <meta charset="utf-8">
    <title>日程安排</title>
    <style></style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">查看日程</h1>
</header>
<div class="mui-content">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell" style="text-align:center"><b>[[${pd.title}]]
        </b><br></li>
        <li class="mui-table-view-cell">
            <div class="mui-row">
                <div class="mui-col-sm-2" style="width:30%; text-align:left;">开始时间</div>
                <div class="mui-col-sm-2" style="width:70%; text-align:left;">[[${bDate}]]
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-row">
                <div class="mui-col-sm-2" style="width:30%; text-align:left;">结束时间</div>
                <div class="mui-col-sm-2" style="width:70%; text-align:left;">[[${eDate}]]
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-row">
                <div class="mui-col-sm-2" style="width:30%; text-align:left;">状态</div>
                <div class="mui-col-sm-2" style="width:70%; text-align:left;">
                    <img th:if="${pd.closed}" id='imgStatus' src='../../images/task_complete.png' style='width:16px'>
                    <img th:if="${!pd.closed}" id='imgStatus' src='../../images/task_ongoing.png' style='width:16px'>
                </div>
            </div>
        </li>
        <li th:if="canShare" class="mui-table-view-cell">
            <div class="mui-row">
                <div class="mui-col-sm-2" style="width:30%; text-align:left;">共享</div>
                <div class="mui-col-sm-2" style="width:70%; text-align:left;">[[${pd.shared?"是":"否"}]]
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-row">
                <div class="mui-col-sm-2" style="width:30%; text-align:left;">创建日期</div>
                <div class="mui-col-sm-2" style="width:70%; text-align:left;">[[${createDate}]]
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">[[${pd.content}]]
        </li>
    </ul>
    <div class="mui-button-row">
        <th:block th:if="canDo">
        <a type="button" class="mui-btn mui-btn-primary mui-btn-outlined btn-modify">修改</a>
        &nbsp;&nbsp;
        <a type="button" class="mui-btn mui-btn-primary mui-btn-outlined btn-del">删除</a>
        &nbsp;&nbsp;
        <a type="button" class="mui-btn mui-btn-primary mui-btn-outlined btn-close">完成</a>
        <a type="button" class="mui-btn mui-btn-primary mui-btn-outlined btn-open">未完成</a>
        </th:block>
    </div>
</div>
<script th:inline="javascript">
    var isUniWebview = [[${nav.isUniWebview}]];
    if (mui.os.plus) {
        // 必须删除，而不能是隐藏，否则mui-bar-nav ~ mui-content中的padding-top会使得位置下移
        $('.mui-bar').remove();
    }

    $(function () {
        var isClosed = [[${pd.closed}]];
        if (isClosed)
            $('.btn-close').hide();
        else
            $('.btn-open').hide();
        $('.btn-modify').click(function () {
            window.location.href = "editPage?id=" + [[${id}]];
        });

        $('.btn-del').click(function () {
            var btnArray = ['否', '是'];
            mui.confirm('您确定要删除么？', '提示', btnArray, function (e) {
                if (e.index == 1) {
                    $.ajax({
                        url: "../../public/plan/delPlan.do",
                        type: "post",
                        data: {
                            id: [[${id}]]
                        },
                        dataType: "html",
                        beforeSend: function (XMLHttpRequest) {
                        },
                        success: function (data, status) {
                            data = $.parseJSON(data);
                            if (data.ret == 1) {
                                var arr = ['确定'];
                                mui.alert(data.msg, '提示', arr, function (e) {
                                    window.history.back();
                                });
                            } else {
                                mui.toast(data.msg);
                            }
                        },
                        complete: function (XMLHttpRequest, status) {
                        },
                        error: function (XMLHttpRequest, textStatus) {
                        }
                    });
                }
            })
        });

        $('.btn-open').click(function () {
            var btnArray = ['否', '是'];
            mui.confirm('您确定要设为未完成状态么？', '提示', btnArray, function (e) {
                if (e.index == 1) {
                    $.ajax({
                            url: "../../public/plan/openPlan.do",
                            type: "post",
                            data: {
                                id: [[${id}]]
                        },
                        dataType: "html",
                        beforeSend: function (XMLHttpRequest) {
                    },
                    success: function (data, status) {
                        data = $.parseJSON(data);
                        if (data.ret == 1) {
                            $('.btn-close').show();
                            $('.btn-open').hide();
                            $('#imgStatus').attr('src', '../../images/task_ongoing.png');
                        }
                        mui.toast(data.msg);
                    },
                    complete: function (XMLHttpRequest, status) {
                    },
                    error: function (XMLHttpRequest, textStatus) {
                    }
                });
                }
            })
        });

        $('.btn-close').click(function () {
            var btnArray = ['否', '是'];
            mui.confirm('您确定要设为完成状态么？', '提示', btnArray, function (e) {
                if (e.index == 1) {
                    $.ajax({
                        url: "../../public/plan/closePlan.do",
                        type: "post",
                        data: {
                            id: [[${id}]]
                        },
                        dataType: "html",
                        beforeSend: function (XMLHttpRequest) {
                        },
                        success: function (data, status) {
                            data = $.parseJSON(data);
                            if (data.ret == 1) {
                                $('.btn-close').hide();
                                $('.btn-open').show();
                                $('#imgStatus').attr('src', '../../images/task_complete.png');
                            }
                            mui.toast(data.msg);
                        },
                        complete: function (XMLHttpRequest, status) {
                        },
                        error: function (XMLHttpRequest, textStatus) {
                        }
                    });
                }
            })
        });
    });
</script>
<div th:replace="th/m/include/navbar :: nav(${nav}, false, '', false)"></div>
</body>
</html>